<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />

    <style type="text/css">
        .text-white {
            color: #ffffff !important;
        }

        .aui-grid [class*=aui-col-] {
            padding: 0.75rem 0;
        }

        .red-bg {
            height: 9.2rem
        }

        .aui-bg-info {
            background-color: #E94B41
        }

        .person-img {
            position: absolute;
            z-index: 1;
            top: 0;
            background-color: #E94B41 !important;
            height: 3rem;
            width: 100%;
            margin: .6rem
        }

        .orders {
            position: absolute;
            z-index: 1;
            top: 4.8rem;
            background-color: #fff;
        }

        .aui-list-item-media img {
            height: 3rem;
            width: 3rem;
            border-radius: 50%;
        }

        .aui-list .aui-list-item-media {
            padding: 0
        }

        .aui-media-list .aui-list-item-inner {
            padding-left: .6rem;
        }

        .order-img {
            height: 1.5rem;
            width: 1.5rem;
            display: inline-block;
        }

        .order-title {
            height: 2rem;
        }

        .orders {
            padding: 0 .6rem;
            margin: 0 .6rem .6rem .6rem
        }

        .aui-grid {
            width: calc(100% - 1.2rem)
        }

        .aui-row {
            height: 3.65rem;
        }

        .aui-bar {
            height: 2.45rem
        }

        .function-item {
            height: 2.5rem
        }

        .aui-margin-b-15 {
            margin-bottom: 0 !important;
        }

        .aui-list-item {
            border: none !important;
        }

        .aui-list .aui-list-item {
            background-image: none !important;
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <div id="app">
        <section class="aui-content" id="user-info">
            <div class="red-bg">
                <img src="../../image/index/red-bg.png" alt="">
            </div>
            <div class="aui-list aui-media-list aui-list-noborder aui-bg-info person-img ">
                <div class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner ">
                        <div class="aui-list-item-media" style="width:3rem;">
                            <img src="../../image/demo1.png" class="aui-img-round">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text text-white aui-font-size-18">wxm</div>
                            <div class="aui-list-item-text text-white">
                                <div><i class="aui-iconfont aui-icon-mobile aui-font-size-14"></i>152****0989</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="aui-content aui-grid aui-margin-b-15 orders white-bg-radius">
            <div class="order-title flex-justify-between" tapmode @click="toInvoice">
                <div class="font-14 text-color-3 font-semibold">发货单</div>
                <div class="flex-align-center">
                    <div class="text-color-9 font-12" style="margin-right:.35rem">查看全部</div>
                    <img class='grey-right' src="../../image/common/grey-right.png" alt="">
                </div>
            </div>
            <div class="aui-row flex-align-center">
                <div class="aui-col-xs-4  flex-justify-center">
                    <img class='order-img' src="../../image/person/order_wait_pay.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">待发货</div>
                </div>
                <div class="aui-col-xs-4 flex-justify-center">
                    <img class='order-img' src="../../image/person/order_wait_take.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">待收货</div>
                </div>
                <div class="aui-col-xs-4 flex-justify-center">
                    <img class='order-img' src="../../image/person/order_wait_pay.png" alt="">
                    <div class="aui-gird-lable aui-font-size-12">已收货</div>
                </div>
            </div>
        </section>
        <section class="aui-content white-bg-radius" style="margin:11.1rem 0.6rem 3.1rem 0.6rem;">
            <ul class="aui-list aui-list-in aui-margin-b-15">
                <li class="aui-list-item function-item height-50" v-for='item in list' tapmode @click='functionList(item.index)'>
                    <div class="aui-list-item-label-icon">
                        <img :src="item.img" alt="" style="height:1.1rem;width:1.1rem;margin-right:.65rem">
                    </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <div class="aui-list-item-title font-14 text-color-3">{{item.text}}</div>
                    </div>
                </li>
            </ul>

        </section>

        <footer class="aui-bar aui-bar-tab">
            <div class="aui-bar-tab-item" tapmode @click='toMerchantOrder'>
                <img class='bottom-seeting-img' src="../../image/merchant/dingdan_unchecked.png" alt="">
                <div class="aui-bar-tab-label font-9 text-color-6">订单</div>
            </div>
            <div class="aui-bar-tab-item aui-active">
                <img class='bottom-seeting-img' src="../../image/main/main_person_checked.png" alt="">
                <div class="aui-bar-tab-label font-9 red-text">我的</div>
            </div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>


<script type="text/javascript ">
    var vm = new Vue({
        el: '#app',
        data: {
            list: [{
                img: '../../image/merchant/scan.png',
                text: '扫一扫',
                index: 0
            }, {
                img: '../../image/merchant/qb.png',
                text: '钱包余额',
                index: 1
            }, {
                img: '../../image/merchant/true-name.png',
                text: '实名认证',
                index: 2
            }, {
                img: '../../image/merchant/share.png',
                text: '分享店铺',
                index: 3
            }, {
                img: '../../image/merchant/shop.png',
                text: '店铺信息',
                index: 4
            }, {
                img: '../../image/merchant/address.png',
                text: '更新店铺位置',
                index: 5
            }, {
                img: '../../image/merchant/kefu.png',
                text: '客服',
                index: 6
            }, {
                img: '../../image/merchant/change.png',
                text: '切换身份',
                index: 7
            }, {
                img: '../../image/merchant/exit.png',
                text: '退出登录',
                index: 8
            }]
        },
        methods: {
            toCart: function() {
                console.log('1111')
                api.openWin({
                    name: 'main-cart_win',
                    url: './main-cart_win.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            toMerchantOrder: function() {
                api.openWin({
                    name: 'merchant-order-list',
                    url: './merchant-order-list.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            toInvoice: function() {
                api.openWin({
                    name: 'invoice-list_win',
                    url: './invoice-list_win.html',
                    pageParam: {
                        name: 'test'
                    }
                });
            },
            // toShopInfo: function() {
            //     api.closeWin({
            //         name: 'main-person_win'
            //     });
            //
            //     api.openFrame({
            //         name: 'shop-info_win',
            //         url: './shop-info_win.html',
            //         rect: {
            //             x: 0,
            //             y: 0,
            //             w: api.winWidth,
            //             h: api.winHeight
            //         }
            //     });
            //
            // },
            functionList: function(index) {
                switch (index) {
                    case 0:
                        api.openWin({
                            name: 'page2',
                            url: './page2.html',
                            pageParam: {
                                name: 'test'
                            }
                        });

                        break;
                    case 1:
                        api.openWin({
                            name: 'wallet-balance_win',
                            url: './wallet-balance_win.html',
                            pageParam: {
                                name: 'test'
                            }
                        });

                        break;
                    case 2:
                        api.openWin({
                            name: 'true-name_win',
                            url: './true-name_win.html',
                            pageParam: {
                                name: 'test'
                            }
                        });

                        break;
                    case 3:
                        api.openWin({
                            name: 'page2',
                            url: './page2.html',
                            pageParam: {
                                name: 'test'
                            }
                        });
                        break;
                    case 4:
                        api.openWin({
                            name: 'shop-info_win',
                            url: '../shop-info_win.html',
                            pageParam: {
                                name: 'test'
                            }
                        });
                        break;
                    case 5:
                        api.openWin({
                            name: 'page2',
                            url: './page2.html',
                            pageParam: {
                                name: 'test'
                            }
                        });
                        break;
                    case 6:
                        api.openWin({
                            name: 'page2',
                            url: './page2.html',
                            pageParam: {
                                name: 'test'
                            }
                        });
                        break;
                    case 7:
                        api.closeToWin({
                            name: 'root'
                        });
                        break;
                    default:

                }
            }

        },
    });

    apiready = function() {

    }

</script>

</html>
